<script setup lang="ts">
import { Delete, Edit, InfoFilled, Star } from "@element-plus/icons-vue";
import useCompete from "@/view/Resource/compete/utils/hook.tsx";
import Dialog from "@/view/Resource/compete/dialog.vue";
import UploadDialog from "@/view/Resource/compete/upload-dialog.vue";
import ListDialog from "@/view/Resource/compete/list-dialog.vue";
import { onMounted } from "vue";
import { formattedDate } from "@/utils/formatDate.ts";

const {
  dialog,
  listDialog,
  uploadDialog,
  selectValue,
  competeList,
  isBeforeNow,
  uploadScore,
  getCompete,
  addCompete,
  editCompete,
  handleLook,
  deleteCompete
} = useCompete()

onMounted(() => {
  getCompete()
})
</script>

<template>
  <el-card class="box-card">
    <div class="card-course-title">
      <el-select v-model="selectValue">
        <el-option :key="0" label="报名中" value="0"/>
        <el-option :key="1" label="进行中-已结束" value="1"/>
        <el-option :key="2" label="全部" value="2"/>
      </el-select>
      <el-button type="primary" @click="addCompete">添加竞赛</el-button>
    </div>
    <div class="card-course-table">
      <el-table
        border
        class="el-table-box"
        ref="multipleTableRef"
        :data="competeList"
        style="width: 100%"
      >
        <el-table-column label="#" width="60" align="center" type="index"/>
        <el-table-column prop="title" align="center" label="标题">
          <template #default="{row}">
            <el-badge is-dot v-if="isBeforeNow(row.endDate) && row.winners.length == 0" class="badge-item"
                      @click="uploadScore(row._id)">
              {{ row.title }}
            </el-badge>
            <span v-else>{{ row.title }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="rules" align="center" label="规则">
          <template #default="{row}">
            <p class="text">
              {{ row.rules }}
            </p>
          </template>
        </el-table-column>
        <el-table-column prop="award" align="center" label="奖品">
          <template #default="{row}">
            <p class="text">
              {{ row.award }}
            </p>
          </template>
        </el-table-column>
        <el-table-column prop="sponsor" align="center" label="赞助商"/>
        <el-table-column prop="startDate" align="center" label="起始时间">
          <template #default="{row}">
            {{ formattedDate(row.startDate) }}
          </template>
        </el-table-column>
        <el-table-column prop="startDate" align="center" label="结束时间时间">
          <template #default="{row}">
            {{ formattedDate(row.startDate) }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="控制" width="220">
          <template #default="{row}">
            <div class="operator-btn">
              <el-button type="primary" size="default" @click="editCompete(row)" :icon="Edit as any" circle/>
              <el-popconfirm
                width="200"
                @confirm="deleteCompete(row._id)"
                confirm-button-text="确定"
                cancel-button-text="取消"
                :icon="InfoFilled"
                icon-color="#f36b6c"
                title="您确定删除此课程吗?"
              >
                <template #reference>
                  <el-button type="danger" size="default" :icon="Delete as any" circle/>
                </template>
              </el-popconfirm>
              <el-button type="info" size="default" @click="handleLook(row)" :icon="Star" circle></el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <Dialog ref="dialog" @get="getCompete"/>
    <UploadDialog ref="uploadDialog"/>
    <ListDialog ref="listDialog"/>
  </el-card>
</template>

<style scoped lang="scss">
.box-card {
  padding: 0 50px;

  .card-course-title {
    height: 35px;
    display: flex;
    justify-content: flex-end;

    .el-button {
      margin-left: 20px;
    }
  }

  .card-course-table {
    margin-top: 20px;

    .el-table-box {
      height: calc(90vh - 140px);

      .el-table__cell {
        position: static !important; // 解决el-image 和 el-table冲突层级冲突问题
      }

      .badge-item {
        margin-top: 5px;
        margin-right: 5px;
      }
    }

    .course-desc {
      display: -webkit-box; /*弹性伸缩盒子*/
      -webkit-box-orient: vertical; /*垂直排列*/
      line-height: 20px;
      -webkit-line-clamp: 1;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .course-img {
      width: 125px;
      height: 60px;

      .el-image {
        border-radius: 5px;
        width: 120px;
        height: 60px;
      }
    }
  }
}

.text {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
</style>
